<template>
  <div class="rightnav">
    <div
      class="gr"
      @click="isgo"
    >
      <img
        src="../assets/rightnavicon/gr.png"
        alt=""
      />
    </div>
    <div class="hx"></div>
    <div
      class="gwc"
      @click="isgo"
    >
      <img
        src="../assets/rightnavicon/gwc.png"
        alt=""
      />
      <div class="gwc1">购物车</div>
      <div class="count">0</div>
    </div>
    <div class="hx"></div>
    <div
      class="top"
      @click="gotop"
    >
      <img
        src="../assets/rightnavicon/top.png"
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    gotop () {
      window.scrollTo(0, 0);
    },
    isgo () {
      this.$router.push('/login');
    },
  },
};
</script>

<style lang="scss" scoped>
.rightnav {
  z-index: 1000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background-color: #202020;
  animation: w34 0.618s linear 0.39s forwards;
  text-align: center;
  color: #efefef;
  img {
    width: 70%;
  }
  & > div {
    position: relative;
    &:hover {
      background-color: #c40000;
    }
  }

  .gr {
    margin: 64px 0 32px 0;
  }
  .hx {
    margin: 0 auto;
    width: 80%;
    height: 1px;
    background-color: #141414;
    border-bottom: 1px solid #353535;
  }
  .gwc {
    padding: 12px 0;
  }
  .gwc1 {
    margin: 16px auto;
    width: 80%;
    font-size: 14px;
    color: #dddddd;
  }
  .count {
    margin: 0 auto;
    background-color: #c40000;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
  }
  .top {
    position: absolute;
    left: 0;
    bottom: 12px;
  }
}
@keyframes w34 {
  0% {
    width: 34px;
    transform: translateX(34px);
  }
  100% {
    width: 34px;
    transform: translateX(0px);
  }
}
@keyframes w50 {
  0% {
    transform: translateX(-15px);
  }
  100% {
    transform: translateX(0px);
  }
}
</style>
